<template>
	<div class="home">
		<img alt="Vue logo" src="../assets/logo.png" />

		<vueAliplayer ref="player" style="width: 600px; height: 400px;" />
		<vueAliplayer ref="player2" style="width: 600px; height: 400px;" />
		<button @click="setFull">全屏</button>
		
		<button @click="player2">播放</button>
	</div>
</template>

<script>
/* eslint-disable */
// import vueAliplayer from './../../lib/vue-ckplayer.umd.min.js';
// import './../../lib/vue-aliplay-player.css';

import vueAliplayer from './../../packages/vue-ckplayer/src/player.vue'

export default {
	name: 'Home',
	components: {
		vueAliplayer: vueAliplayer
	},
	mounted() {
		this.$nextTick(() => {
			this.player();
		});
	},
	
	methods: {
		player() {
			this.$refs.player.loadPlayer('rtmp://218.86.60.210:6103/pss/l_2c83ef23c59d7c813d422f339145d64d');
			// this.$refs.player2.loadPlayer('http://hls01open.ys7.com/openlive/b374fade33b84c34822e8d54cb80d34b.m3u8');
		},
		setFull() {
			this.$refs.player.load('http://hls01open.ys7.com/openlive/b374fade33b84c34822e8d54cb80d34b.m3u8');
		},
		player2(){
			this.$refs.player.pause()
		}
	}
};
</script>